<template>
    <figure class="comment-list-block">
        <div class="avator-block">
            <div>
                <img width="50px" height="50px" :src="imgSrc">
                <p style="margin:0 10px;display:inline-block;height:50px;line-height:50px;vertical-align:top">{{ item.userName }}</p>
            </div>
            <div>{{ creatTime }}</div>
        </div>
        <div>{{ item.content }}</div>
        <div class="like-comment-block">
            <span @click="addCurrentLike"><Icon :style="likeBg" type="ios-thumbs-up" size="20"/>{{ item.useful?item.useful:"" }}</span>
            <span @click="addComComment"><Icon type="md-text" size="20"/></span>
            <span v-if="username === item.userName" @click="delCurrentComment"><Icon type="md-trash" size="20"/></span>
        </div>
    </figure>
</template>

<script>
import { formatData } from '@/utils/format';
import { domain } from '@/utils/host';
export default {
    name:"commentList",
    props:['item'],
    computed:{
        // 判断是否是当前用户可以删除的评论
        username(){
            return localStorage.getItem('username');
        },
        // 头像
        imgSrc(){
            return  `${domain}/fdl/preImages/${this.item.headerPath}`
        },
        // 时间格式化
        creatTime(){
            return formatData(this.item.create_time,{type:'detail'})
        },
        // 点赞是否高亮
        likeBg(){
            return this.item.voted ? {color:"#C2142F"} : ""
        }
    },
    methods:{
        addCurrentLike(){
            this.$emit("addCurrentLike",{
                voted:this.item.voted,
                comment_id:this.item.comment_id
            })       
        },
        addComComment(){
            this.$emit("addComComment")
        },
        delCurrentComment(){
            this.$emit("delCurrentComment",this.item.comment_id)
        }
    }
}
</script>

<style lang="scss" scoped>
    .comment-list-block{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom:1px solid rgba(217,219,221,1);
        .avator-block{
            display: flex;
            justify-content: space-between;
            font-size:12px;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .like-comment-block{
            margin-top:20px;
            font-size:12px;
            font-weight:400;
            color:rgba(153,153,153,1);
            span{
                display: inline-block;
                cursor: pointer;
                margin-right: 20px;
            }
        }
    }
</style>